<template>
  <div class="e-employee-list">
      <!-- 基本信息 -->
      <w-form-validate @on-validate="saveInfo">
        <div class="e-filter-options">
            <div class="e-title">员工基本信息</div>
            <div class="e-item" style="margin-left: 20px;">
                <span class="title">用户名</span>
                <div class="dis-block">
                    <w-input :holder="`请填写`" v-model="updateParams.userName" @on-change='checkUserName' rule="isEmpty" error="*此项必填"></w-input>
                </div>
            </div>
            <div class="e-item">
                <span class="title">员工姓名</span>
                <div class="dis-block">
                    <w-input :holder="`请填写`" v-model="updateParams.trueName" rule="isEmpty" error="*此项必填"></w-input>
                </div>
            </div>
            <div class="e-item">
                <span class="title">手机号码</span>
                <div class="input dis-block">
                    <w-input :holder="`请填写`" v-model="updateParams.safeMobile" rule="isEmpty|isMobile" error="*此项必填|*手机号为11位"></w-input>
                </div>
            </div>
            <div class="e-item">
                <span class="title">员工邮箱</span>
                <div class="dis-block">
                    <w-input :holder="`请填写`" v-model="updateParams.mail" rule="isEmail" error="*邮箱格式不对"></w-input>
                </div>
            </div>
            <div class="e-item" style="margin-left: 20px;">
              <span class="title">员工工号</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="updateParams.workNum" :disabled='true'></w-input>
              </div>
            </div>
            <div class="e-item">
              <span class="title">化名</span>
              <div class="dis-block">
                <w-input :holder="`请填写`" v-model="updateParams.alias" rule="isEmpty" error="*此项必填"></w-input>
              </div>
            </div>
            <button type='submit' class="info-btn">提交</button>
        </div>
      </w-form-validate>
      <!-- 权限修改 -->
      <div class="e-permissions">
          <div class="e-title">员工权限修改</div>
          <div class="e-item">
            <span class="title">角色</span>
            <div class="dis-block">
              <w-select :options='roleList' v-model="applyParams.roleId" v-if="!isSupAdmin"></w-select>
              <w-input :value="`超级管理员`" :disabled='true' v-if="isSupAdmin"></w-input>
            </div>
            <em>此修改需要审核</em>
          </div>
          <div class="e-item">
            <span class="title">部门</span>
            <div class="dis-block">
              <w-select :options='departList' v-model="applyParams.departmentId" v-if="!isSupAdmin"></w-select>
              <w-input v-model="departmentName" :disabled='true' v-if="isSupAdmin"></w-input>
            </div>
            <em>此修改需要审核</em>
          </div>
      </div>
      <!-- 按钮 -->
      <div class="submit-btn" v-if="!isSupAdmin">
        <w-button @on-click='saveRoleOrDepart'>提交</w-button>
      </div>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        type: 'oneself'
      },
      employList: [],
      updateParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        userName: '',
        safeMobile: '',
        workNum: '',
        alias: '',
        trueName: '',
        roleId: '',
        departmentId: '',
        type: 'oneself'
      },
      departmentName: '',
      applyParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        roleId: '',
        departmentId: ''
      },
      userName: '', // 保存用户名
      isSupAdmin: false // 判断是否 是超级管理员
    }
  },
  created() {
    this.fetchRole({threeMenuCode: this.$route.query.three, token: this.token})
    this.fetchDepartList({threeMenuCode: this.$route.query.three, token: this.token})
    this._getEmployInfo()
  },
  computed: {
    ...mapGetters(['token', 'roleList', 'departList'])
  },
  methods: {
    ...mapActions(['fetchRole', 'fetchDepartList']),
    _getEmployInfo() {
      this.queryParams.accessToken = this.token
      // 获取员工信息
      apiSystemMange.getEmployInfo(this.queryParams).then(data => {
        if (data.code != '200') return
        this.userName = data.data.bean.userName
        this.updateParams.userName = data.data.bean.userName
        this.updateParams.safeMobile = data.data.bean.safeMobile
        // this.updateParams.entryTime = data.data.bean.entryTimeString.substring(0, 10)
        this.updateParams.workNum = data.data.bean.workNum
        this.updateParams.alias = data.data.bean.alias
        this.updateParams.mail = data.data.bean.mail
        this.updateParams.trueName = data.data.bean.trueName || ''
        // 员工角色/部门
        this.applyParams.roleId = this.updateParams.roleId = data.data.bean.role.id
        this.applyParams.departmentId = this.updateParams.departmentId = data.data.bean.department.id
        this.departmentName = data.data.bean.department.departmentName
        if (data.data.bean.role.roleName == '超级管理员') {
          this.isSupAdmin = true
        }
      })
    },
    checkUserName() {
      if (this.userName != this.updateParams.userName) { // 判断用户名有没有修改，修改了再去检测修改的是否存在
        apiSystemMange.checkUser({userName: this.updateParams.userName}).then(req => {
          if (req.code != '310') return
          this.$toast('该用户名已存在')
        })
      }
    },
    // 保存员工信息
    saveInfo() {
      this.updateParams.accessToken = this.token
      if (this.userName != this.updateParams.userName) { // 判断用户名有没有修改，修改了再去检测修改的是否存在
        apiSystemMange.checkUser({userName: this.updateParams.userName}).then(req => {
          if (req.code == '310') {
            this.$toast('该用户名已存在')
            return
          }
          apiSystemMange.updateEmploy(this.updateParams).then(data => {
            if (data.code != '200') return
            this.$toast('员工信息修改成功', () => {
              this._getEmployInfo()
            })
          })
        })
      } else { // 没有修改，直接提交信息
        apiSystemMange.updateEmploy(this.updateParams).then(data => {
          if (data.code != '200') return
          this.$toast('员工信息修改成功', () => {
            this._getEmployInfo()
          })
        })
      }
    },
    // 修改角色/部门
    saveRoleOrDepart() {
      this.applyParams.accessToken = this.token
      apiSystemMange.applyRoleDepart(this.applyParams).then(data => {
        if (data.code != '200') return
        this.$toast('申请成功，等待审核', () => {
          this.$router.push(`/employeeMange/result?three=${this.$route.query.three}`)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-employee-list {
  margin: 30px 0;
  .dis-block {
    vertical-align: middle;
  }
}
.e-title {
  margin-left: 20px;
  font-size: 13px;
}
.e-item {
  margin-top: 20px;
  .title {
    text-align: left;
  }
}
.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  padding-bottom: 20px;
}
.e-permissions {
  .e-title {
    margin-top: 20px;
  }
  .e-item {
    display: block;
    margin-left: 20px;
    .dis-block {
      width: 320px;
    }
    em {
      font-size: 11px;
      color: $color-main;
      margin-left: 30px;
    }
  }
}
.submit-btn {
  margin: 40px auto 20px;
  text-align: center;
}
.info-btn {
  margin: 20px auto 0;
  display: block;
  background: $color-main;
  padding: 5px 30px;
  border-radius: 5px;
  color: #fff;
}
</style>